<template>
  <div class="backgroud" id="backgroud">
    <div>
      <div style="display: flex;align-items: center; margin-bottom: 30px;">
        <h1><img src="@/assets/123921c824a9fa1e8f92f0b46ee06bac.jpg" width='135' height='131'></h1>
        <div>
          <b>
            <h4 style="font-family:楷书;">人工智能协会</h4>
          </b>
        </div>
      </div>
      <div style="width: 400px;margin: 0 auto;">
        <div class="login-tabs">
          <div class="login-tab active" id="login-account-tab">账号登录</div>
        </div>
        <div class="login-web input" style="margin-top: 10px;" id="login-web input">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0">
            <el-form-item prop="no">
              <el-input placeholder="请输入学号" v-model="ruleForm.no"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="请输入密码" type="password" v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      ruleForm: {
        no: '',
        password: '',
      },
      rules: {
        no: [
          { required: true, message: '请输入学号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
        ],
      },
    }
  },
  methods: {
    login() {
      axios
        .post('http://1.12.77.253:8080/student/login', {
          no: this.ruleForm.no,
          password: this.ruleForm.password,
        })
        .then((response) => {
          console.log(response.data)
          // 在这里处理返回的数据
          let code = response.data.code
          if (code == 1) {
            localStorage.setItem('token', response.data.data.token)
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            // 跳转到答题页
          } else {
            this.$message.error(response.data.msg)
          }
        })
        .catch((error) => {
          console.log(error)
          this.$message.error("请求错误")
          // 在这里处理错误情况
        })
    },
  },
}
</script>

<style scoped>
/deep/ .el-form-item__content {
  justify-content: center;
}

h4 {
  left: 190px;
  top: 20px;
  font-size: 30px;
  font-family: '华文宋体';
}

.login-tab.active {
  width:360px;
  border-bottom: 2px solid #123081;
  color: #123081;
  padding: 20px;
  font-size: 20px;
}

/deep/.el-input__inner {
  padding: 20px;
}

/deep/ .el-button {
  width: 600px;
}

/deep/ .el-form {
  width: 350px;
  margin: 0 auto;
}

.backgroud {
  background-image: url("@/assets/bj.jpg");
  width: 100%;
  height: 800px;
  background-size: cover;
}


</style>
